<!-- Layout container -->
<div class="layout-container">
    <!-- include _ (layout-navbar.html) -->

    <!-- Layout content -->
    <div class="layout-content">

        <!-- Content -->
        <div class="container-fluid flex-grow-1 container-p-y">

            <h4 class="font-weight-bold py-0">
                Archives
            </h4>

            <div class="card mb-3">
                <div class="card-header d-none d-md-block">
                    <div class="row no-gutters align-items-center">
                        <div class="col"></div>
                        <div class="col-3 text-muted">
                            <div class="row no-gutters align-items-center">
                                <div class="col-12 text-center">Last update</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="archivesContainer">
                    {% for p in posts %}
                    <hr class="m-0">
                    <div class="card-body py-3">
                        <div class="row no-gutters align-items-center">
                            <div class="col">
                                <a href="{{ p.url }}" class="text-big">{{ p.title }}</a>
                                {% if p.cats.@count %}
                                <div class="small mt-1">
                                    所属目录
                                    {% for cat in p.cats %}
                                    <a href="{{ p.url }}" class="text-muted">&nbsp;·&nbsp;{{ cat.name }}</a>
                                    {% /for %}

                                    {% if p.tags.@count %}
                                    <span class="ml-2">标签:</span>
                                    {% for tag in p.tags %}
                                    <a href="{{ tag.url }}" class="badge badge-default align-text-bottom ml-1 text-muted">#{{ tag.name }}</a>
                                    {% /for %}
                                    {% /if %}
                                </div>
                                {% /if %}
                            </div>
                            <div class="d-none d-md-block col-3">

                                <div class="row no-gutters align-items-center">
                                    <div class="media col-12 align-items-center">
                                        <img src="assets/img/avatars/2-small.png" alt="" class="d-block ui-w-30 rounded-circle">
                                        <div class="media-body flex-truncate ml-2">
                                            <div class="line-height-1 text-truncate text-muted">{{ p.date }}</div>
                                            <!--                                        <a href="javascript:void(0)" class="text-muted small text-truncate">by Leon Wilson</a>-->
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    {% /for %}
                </div>

            </div>
        </div>
        <!-- / Content -->

    </div>
    <!-- Layout content -->

</div>
<!-- / Layout container -->
